<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view
					class="flex title justify-between"
					@click="() => (isCollapse = !isCollapse)">
					<text>模具信息</text>
					<u-icon
						v-show="!isCollapse && taskInfo?.assetId"
						name="arrow-up"
						color="#000a7b"></u-icon>
					<u-icon
						v-show="isCollapse && taskInfo?.assetId"
						name="arrow-down"
						color="#000a7b"></u-icon>
				</view>
				<view
					v-show="!taskInfo?.assetId"
					class="grey1-color flex justify-start"
					style="margin-bottom: 12px">
					暂无模具信息，请选择模具
				</view>
				<view class="record-item" v-show="taskInfo?.assetId">
					<text>模具名称</text>
					<text>{{ taskInfo?.assetName || "" }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.assetId">
					<text>模具编号</text>
					<text>{{ taskInfo?.assetCode || "" }}</text>
				</view>
				<view v-show="!isCollapse && taskInfo?.assetId">
					<view class="record-item" v-show="taskInfo?.assetModelNo">
						<text>品牌型号</text>
						<text>{{ taskInfo?.assetModelNo || "" }}</text>
					</view>
					<view class="record-item" v-show="taskInfo?.locationName">
						<text>模具位置</text>
						<text>{{ taskInfo?.locationName || "" }}</text>
					</view>
					<view class="record-item" v-show="taskInfo?.assetTypeName">
						<text>模具类型</text>
						<text>{{ taskInfo?.assetTypeName || "" }}</text>
					</view>
					<view
						class="record-item"
						v-show="taskInfo?.usingDepartmentName">
						<text>使用部门</text>
						<text class="font-13">
							{{ taskInfo?.usingDepartmentName }}
						</text>
					</view>
					<view
						class="record-item"
						v-show="taskInfo?.usingPersonName">
						<text>使用人</text>
						<text>{{ taskInfo?.usingPersonName || "" }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="DeviceInfoTemplate">
const props = defineProps({
	taskInfo: {
		type: Object,
		default: () => {},
	},
});

const { taskInfo } = toRefs(props);

// 是否折叠
const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
</style>
